<style lang="scss">
//scss
.wrapper-layout {
	background-color: #fff;
	box-shadow: 0 0 8px #ddd;
	margin-bottom: 15px;
	min-height: 100px;
	position: relative;
	padding-bottom: 26px;
	// &.wrapper-layout-footer {
	// 	padding-bottom: 50px;
	// }
	.wrapper-header {
		font-weight: bold;
		line-height: 36px;
		padding: 0 12px;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		border-bottom: 1px solid #dedede;
		font-size: 13px;
		position: relative;
	}
	.wrapper-down {
		position: absolute;
		top: 60px;
		color: #666;
		font-size: 22px;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: 10;
		transform-origin: center center;
		transition: all 0.3s;
	}
	.wrapper-down-active {
		top: unset;
		transform: translate(-50%, 0) rotate(180deg);
		bottom: 3px;
	}
	.wrapper-footer {
		text-align: right;
		position: fixed;
		bottom: 0;
		right: 0;
		// z-index: 2;
        z-index: 5;
		left: 0;
		background-color: #fff;
		padding: 6px;
		box-shadow: 0 0 8px #ddd;
	}
	.wrapper-icon {
		margin-top: -1px;
		margin-right: 3px;
	}
}
</style>

<template>
	<div :class="wrapperClasses">
		<!-- <vIcon v-if="expand" @click.native="toggle" type="code-download" :class="toggleClasses" /> -->
		<header :class="headerClasses">
			<slot name="title">
				<!-- <vIcon :type="getIcon" size="14" class="wrapper-icon"></vIcon> -->
                <Icon :type="getIcon" size="14" class="wrapper-icon" />
				{{langKey?$t(langKey,{defaultValue:title}):title}}
			</slot>
		</header>
        <!-- vTransition -->
		<div>
			<div v-show="active" class="clearfix">
				<slot></slot>
			</div>
		</div>
		<footer class="wrapper-footer" v-if="$slots.footer">
			<slot name="footer"></slot>
		</footer>
	</div>
</template>

<script>
export default {
	props: {
		theme: String,
		title: String,
		icon: String,
		expand: {
			type: Boolean,
			default: true
		},
		langKey: String,
	},
	data() {
		return {
			active: true,
		}
	},
	computed: {
		wrapperClasses() {
			return [
				'wrapper-layout',
				// {
				// 	'wrapper-layout-footer': this.$slots.footer
				// }
			]
		},
		getIcon() {
			return this.icon || "logo-wordpress"
		},
		toggleClasses() {
			return [
				'wrapper-down',
				{
					'wrapper-down-active': this.active
				}
			]
		},
		headerClasses() {
			const theme = this.theme || 'white';
			if (theme === 'white') return `wrapper-header color-default bg-${theme}`
			return `wrapper-header color-white bg-${theme}`
		},
	},
	methods: {
		toggle() {
			this.active = !this.active;
		}
	},
}
</script>
